<template>
	<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
		:duration="duration">
		<swiper-item>
			<view class="swiper-item uni-bg-red">A</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-green">B</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-blue">C</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {

		data() {
			return {
				indicatorDots:true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		}
	}
</script>

<style>	
	swiper{
		width: 100%;
		height: 300rpx;
	}
	.swiper-item {
		width: 100%;
		height: 300rpx;
	}

	.uni-bg-red {
		background-color: pink;
	}

	.uni-bg-green {
		background-color: yellow;
	}

	.uni-bg-blue {
		background-color: turquoise;
	}
</style>